<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		
		<link type="text/css" rel="stylesheet" href="../css/model/bootstrap.css"  />
		<link type="text/css" rel="stylesheet" href="../css/model/swiper.css"  />
		<link type="text/css" rel="stylesheet" href="../css/layui.css" />
		<link type="text/css" rel="stylesheet" href="../css/top_main.css" />
		<link type="text/css" rel="stylesheet" href="../css/footer.css" />
		<link type="text/css" rel="stylesheet" href="../css/orders.css" />
	
		<script type="text/javascript" src='../js/model/jquery-2.1.4.min.js'></script>
		<script type="text/javascript" src="../js/model/bootstrap.js"></script>
		<script type="text/javascript" src="../js/model/swiper.js"></script>
		<script type="text/javascript" src="../js/model/reset_font.js"></script>
		<script type="text/javascript" src="../layui.all.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script type="text/javascript" src="../js/footer.js"></script>
		<script type="text/javascript" src="../js/orders.js"></script>
		<script>
			window.onload=function(){
				$("body").css("opacity",1);
			}
		</script>
		<title>优当借书</title>
	</head>
	<body style="opacity: 0;">
		<!--top begin-->
		<div class="top">
			<span>全部订单</span>
		</div>
		<!--top the end-->
		<!--main begin-->
		<div class="main">
			<!--上部分导航栏 开始-->
			<div class="navs">
				<a href="#" class="nav1 Btnbutton active">
					<span>借书订单</span>
				</a>
				<a href="#" class="nav2 Btnbutton">
					<span>商城订单</span>
				</a>
			</div>
			<!--上部分导航栏 结束-->
			<!--订单 主体  开始-->
			<div class="mySwiper">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<!--第一个slide开始-->
						<div class="swiper-slide slide1">
							<!--一个订单 开始-->
							<div class="item item1" id="001">
								<!--订单状态 0 可取消 1为不可取消-->
								<input type="hidden" class="status" name="status" value="0">
								<!--订单进度 0 未配送  1配送中  2待评价  3  已完成-->
								<input type="hidden" class="rate" name="rate" value="0"/>
								
								<div class="i_top">
									<div class="i_top_left">订单编号：<span class="ddbh">1234567891234567</span></div>
									<div class="i_top_right type1"><!--type1为可取状态 显示倒计时  type2为不可取消状态 显示订单进度-->
										
										<div class="timer">
											<img src="../images/orders/clock.png" class="clock" />
											<span>剩余时间：</span>
											<span class="djs"><span class="minute">0</span>:<span class="second">5</span></span>
										</div>
										<div class="itemrate"></div>
									</div>
								</div>
								<div class="i_con">
									<div class="i_c_con">
										<a href="orderdetail1.html" class="">
											<img src="../images/books/book.png" class="goodpic" />
											<div class="goodstype">
												<div class="goodsname">十万个为什么</div>
												<div class="ages">3~8岁</div>
												<div class="isbn">ISBN:<span>1234567891234</span></div>
											</div>
											<div class="goodsnum">x<span>1</span></div>
										</a> 
									</div>
									<div class="i_c_con">
										<a href="orderdetail1.html" class="">
											<img src="../images/books/book.png" class="goodpic" />
											<div class="goodstype">
												<div class="goodsname">鲁滨逊漂流记</div>
												<div class="ages">10~24岁</div>
												<div class="isbn">ISBN:<span>1234567891234</span></div>
											</div>
											<div class="goodsnum">x<span>1</span></div>
										</a> 
									</div>
								</div>
								<div class="i_bot">
									<div class="i_bot_left">
										<div class="ibl_type1">
											<div class="spsl">共<span class="i_num">2</span>件商品</div>
											<div class="shuoming">(倒计时结束，无法取消及修改订单)</div>
										</div>
										<div class="ibl_type2">
											<div class="spsl">共<span class="i_num">2</span>件商品</div>
										</div>
									</div>
									<div class="i_bot_right	"></div>
								</div>
							</div>
							<!--一个订单结束-->
							
							<!--一个订单开始-->
							<div class="item item1">
								<!--订单状态 0 可取消 1为不可取消-->
								<input type="hidden" class="status" name="status" value="1">
								<!--订单进度 0 未配送  1配送中  2待评价  3  已完成-->
								<input type="hidden" class="rate" name="rate" value="1"/>
								
								
								<div class="i_top">
									<div class="i_top_left">订单编号：<span class="ddbh">1234567891234567</span></div>
									<div class="i_top_right type1"><!--type1为可取状态 显示倒计时  type2为不可取消状态 显示订单进度-->
										
										<div class="timer">
											<img src="../images/orders/clock.png" class="clock" />
											<span>剩余时间：</span>
											<span>20:20</span>
										</div>
										<div class="itemrate"></div>
									</div>
								</div>
								<div class="i_con">
									<div class="i_c_con">
										<a href="#" class="">
											<img src="../images/books/book.png" class="goodpic" />
											<div class="goodstype">
												<div class="goodsname">十万个为什么</div>
												<div class="ages">3~8岁</div>
												<div class="isbn">ISBN:<span>1234567891234</span></div>
											</div>
											<div class="goodsnum">x<span>1</span></div>
										</a> 
									</div>
									<div class="i_c_con">
										<a href="#" class="">
											<img src="../images/books/book.png" class="goodpic" />
											<div class="goodstype">
												<div class="goodsname">鲁滨逊漂流记</div>
												<div class="ages">10~24岁</div>
												<div class="isbn">ISBN:<span>1234567891234</span></div>
											</div>
											<div class="goodsnum">x<span>1</span></div>
										</a> 
									</div>
								</div>
								<div class="i_bot">
									<div class="i_bot_left">
										<div class="ibl_type1">
											<div class="spsl">共<span class="i_num">2</span>件商品</div>
											<div class="shuoming">(倒计时结束，无法取消及修改订单)</div>
										</div>
										<div class="ibl_type2">
											<div class="spsl">共<span class="i_num">2</span>件商品</div>
										</div>
									</div>
									<div class="i_bot_right	">
										
									</div>
								</div>
							</div>
							<!--一个订单结束-->
							
							<!--一个订单开始-->
							<div class="item item1">
								<!--订单状态 0 可取消 1为不可取消-->
								<input type="hidden" class="status" name="status" value="1">
								<!--订单进度 0 未配送  1配送中  2待评价  3  已完成-->
								<input type="hidden" class="rate" name="rate" value="2"/>
								
								
								<div class="i_top">
									<div class="i_top_left">订单编号：<span class="ddbh">1234567891234567</span></div>
									<div class="i_top_right type1"><!--type1为可取状态 显示倒计时  type2为不可取消状态 显示订单进度-->
										
										<div class="timer">
											<img src="../images/orders/clock.png" class="clock" />
											<span>剩余时间：</span>
											<span>20:20</span>
										</div>
										<div class="itemrate"></div>
									</div>
								</div>
								<div class="i_con">
									<div class="i_c_con">
										<a href="#" class="">
											<img src="../images/books/book.png" class="goodpic" />
											<div class="goodstype">
												<div class="goodsname">十万个为什么</div>
												<div class="ages">3~8岁</div>
												<div class="isbn">ISBN:<span>1234567891234</span></div>
											</div>
											<div class="goodsnum">x<span>1</span></div>
										</a> 
									</div>
									<div class="i_c_con">
										<a href="#" class="">
											<img src="../images/books/book.png" class="goodpic" />
											<div class="goodstype">
												<div class="goodsname">鲁滨逊漂流记</div>
												<div class="ages">10~24岁</div>
												<div class="isbn">ISBN:<span>1234567891234</span></div>
											</div>
											<div class="goodsnum">x<span>1</span></div>
										</a> 
									</div>
								</div>
								<div class="i_bot">
									<div class="i_bot_left">
										<div class="ibl_type1">
											<div class="spsl">共<span class="i_num">2</span>件商品</div>
											<div class="shuoming">(倒计时结束，无法取消及修改订单)</div>
										</div>
										<div class="ibl_type2">
											<div class="spsl">共<span class="i_num">2</span>件商品</div>
										</div>
									</div>
									<div class="i_bot_right	"></div>
								</div>
							</div>
							<!--一个订单结束-->
						</div>
						<!--第一个slide结束-->
						<!--第二个slide开始-->
						<div class="swiper-slide slide2">
							<!--一个订单 开始-->
							<div class="item item2">
								<!--订单进度 0 未配送  1配送中  2待评价  3 待追评 4 已完成-->
								<input type="hidden" class="rate" name="rate" value="4"/>
								<div class="i_top">
									<div class="i_top_left">
										订单编号：<span>1234567891234567</span>
									</div>
									<div class="i_top_right">
										<div class="itemrate"></div>
									</div>
								</div>
								<div class="i_con">
									<div class="i_c_con2">
										<a href="#">
											<img src="../images/books/book.png" class="goodpic2" />
											<div class="goodstype2">
												<div class="goodsname2">十万个为什么十万个为什么十万个为什么十万个为什么</div>
												<div class="goodsize">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>
												
											</div>
											<div class="goodsprice">￥<span class="price">59.00</span></div>
											<div class="goodsnum2">x<span class="num">12</span></div>
										</a>
									</div>
									<div class="i_c_con2">
										<a href="#">
											<img src="../images/books/book.png" class="goodpic2" />
											<div class="goodstype2">
												<div class="goodsname2">十万个为什么十万个为什么十万个为什么十万个为什么</div>
												<div class="goodsize">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>
												
											</div>
											<div class="goodsprice">￥<span class="price">59.00</span></div>
											<div class="goodsnum2">x<span class="num">2</span></div>
										</a>
									</div>
							</div>
							<div class="i_bot2">
								<div class="i_bot2_top">
									<div class="i_bot2_bot_left">共<span class="amount"></span>件商品</div>
									<div class="i_bot2_bot_right">
										共计￥<span class="total"></span>(含运费￥<span>0.00</span>)
									</div>
								</div>
								<div class="i_bot2_bot">
									<!--<input type="button" class="" name="" value="待评价" />-->
								</div>
							</div>
							</div>
							<!--一个订单结束-->
							
							<!--一个订单 开始-->
							<div class="item item2">
								<!--订单进度 0 未配送  1配送中  2待评价  3 待追评 4 已完成-->
								<input type="hidden" class="rate" name="rate" value="1"/>
								<div class="i_top">
									<div class="i_top_left">
										订单编号：<span>1234567891234567</span>
									</div>
									<div class="i_top_right">
										<div class="itemrate"></div>
									</div>
								</div>
								<div class="i_con">
									<div class="i_c_con2">
										<a href="#">
											<img src="../images/books/book.png" class="goodpic2" />
											<div class="goodstype2">
												<div class="goodsname2">十万个为什么十万个为什么十万个为什么十万个为什么</div>
												<div class="goodsize">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>
												
											</div>
											<div class="goodsprice">￥<span class="price">59.00</span></div>
											<div class="goodsnum2">x<span class="num">1</span></div>
										</a>
									</div>
									<div class="i_c_con2">
										<a href="#">
											<img src="../images/books/book.png" class="goodpic2" />
											<div class="goodstype2">
												<div class="goodsname2">十万个为什么十万个为什么十万个为什么十万个为什么</div>
												<div class="goodsize">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>
												
											</div>
											<div class="goodsprice">￥<span class="price">59.00</span></div>
											<div class="goodsnum2">x<span class="num">1</span></div>
										</a>
									</div>
							</div>
							<div class="i_bot2">
								<div class="i_bot2_top">
									<div class="i_bot2_bot_left">共<span class="amount"></span>件商品</div>
									<div class="i_bot2_bot_right">
										共计￥<span class="total"></span>(含运费￥<span>0.00</span>)
									</div>
								</div>
								<div class="i_bot2_bot">
									
								</div>
							</div>
							</div>
							<!--一个订单结束-->
						</div>
						<!--第二个slide结束-->
					</div>
				</div>
			</div>
			<!--订单 主体 结束-->
		</div>
		
		<!--main 结束-->
		<div class="isnone" style="display: none;">
			<img src="../images/orders/isnone.png"  />
			<div>您还没有订单哦~</div>
		</div>
		<div class="footer">
			<ul>
				<li>
					<a href="#" class="home ">
						<div class="img"></div>
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="#" class="news">
						<div class="img"></div>
						<span>动态</span>
					</a>
				</li>
				<li>
					<a href="#"  class="buycars ">
						<div class="img"></div>
						<span>借购车</span>
					</a>
				</li>
				<li>
					<a href="#" class="myorders active">
						<div class="img"></div>
						<span>订单</span>
					</a>
				</li>
				<li>
					<a href="#" class="me">
						<div class="img"></div>
						<span>我</span>
					</a>
				</li>
			</ul>
		</div>
		
		<!--购物车确认删除提示 开始-->
		<div class="grey" style="display: none;">
			<div class="whiteboard">
				<div class="wb_top">
					确认删除此订单？
				</div>
				<div class="wb_bot">
					<button class="wb_bot_cancel">取消</button>
					<button class="wb_bot_comfirm">确认</button>
				</div>
			</div>
		</div>
		<!--购物车确认删除提示 结束-->
		<script>
			$(function(){
				var id_now;
				$("body").on("click",".cancel",function(){
					$(".grey").show();
					id_now=$(this).parent().parent().parent().parent().find(".item").attr("id");
				})
				$(".wb_bot_cancel").click(function(){
				layer.msg("操作已取消");
				$(".grey").hide();
			})
			$(".wb_bot_comfirm").click(function(){
				$("#"+id_now).remove();
				$(".grey").hide();
			})
			})
			
		</script>
		
		
		<script>
		  	layui.use('flow', function(){
		  		var spage=1;
		  		var html1='<div class="item item1">'+
						'<input type="hidden" class="status" name="status" value="0">'		+
						'<input type="hidden" class="rate" name="rate" value="0"/>'		+
						'<div class="i_top">'+
						'<div class="i_top_left">订单编号：<span class="ddbh">1234567891234567</span></div>'		+
						'<div class="i_top_right type1"><!--type1为可取状态 显示倒计时  type2为不可取消状态 显示订单进度-->'+
						'<div class="timer">'+
						'<img src="../images/orders/clock.png" class="clock" />'+
						'<span>剩余时间：</span>'+
						'<span>20:20</span>'+
						'</div>'+
						'<div class="itemrate"></div>'+
						'</div>'+
						'</div>'+
						'<div class="i_con">'+
						'<div class="i_c_con">'+
						'<a href="#" class="">'+
						'<img src="../images/books/book.png" class="goodpic" />'+
						'<div class="goodstype">'+
						'<div class="goodsname">十万个为什么</div>'+
						'<div class="ages">3~8岁</div>'	+
						'<div class="isbn">ISBN:<span>1234567891234</span></div>'+
						'</div>'+
						'<div class="goodsnum">x<span>1</span></div>'+
						'</a> '+
						'</div>'+
						'<div class="i_c_con">'+
						'<a href="#" class="">'+
						'<img src="../images/books/book.png" class="goodpic" />'+
						'<div class="goodstype">'+
						'<div class="goodsname">鲁滨逊漂流记</div>'+
						'<div class="ages">10~24岁</div>'+
						'<div class="isbn">ISBN:<span>1234567891234</span></div>'+
						'</div>'+
						'<div class="goodsnum">x<span>1</span></div>'+
						'</a> '+
						'</div>'+
						'</div>'+
						'<div class="i_bot">'	+		
						'<div class="i_bot_left">'	+
						'<div class="ibl_type1">'+
						'<div class="spsl">共<span class="i_num">2</span>件商品</div>'+		
						'<div class="shuoming">(倒计时结束，无法取消及修改订单)</div>'	+			
						'</div>'	+				
						'<div class="ibl_type2">'	+
						'<div class="spsl">共<span class="i_num">2</span>件商品</div>'+
						'</div>'+
						'</div>'+
						'<div class="i_bot_right	">'	+			
						'</div>'	+				
						'</div>'	+			
						'</div>'	;
						
					var html2='<div class="item item2">'+
							'<input type="hidden" class="rate" name="rate" value="1"/>'+
							'<div class="i_top">'+
							'<div class="i_top_left">'+
							'订单编号：<span>1234567891234567</span>'+
							'</div>'+
							'<div class="i_top_right">'+
							'<div class="itemrate"></div>'+
							'</div>'+
							'</div>'+
							'<div class="i_con">'+
							'<div class="i_c_con2">'+
							'<a href="#">'+
							'<img src="../images/books/book.png" class="goodpic2" />'+
							'<div class="goodstype2">'+
							'<div class="goodsname2">十万个为什么十万个为什么十万个为什么十万个为什么</div>'+
							'<div class="goodsize">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>'+
							'</div>'+
							'<div class="goodsprice">￥<span class="price">59.00</span></div>'+
							'<div class="goodsnum2">x<span class="num">1</span></div>'+
							'</a>'+
							'</div>'+
							'<div class="i_c_con2">'+
							'<a href="#">'+
							'<img src="../images/books/book.png" class="goodpic2" />'+
							'<div class="goodstype2">'+
							'<div class="goodsname2">十万个为什么十万个为什么十万个为什么十万个为什么</div>'+
							'<div class="goodsize">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>'+
							'</div>'+
							'<div class="goodsprice">￥<span class="price">59.00</span></div>'+
							'<div class="goodsnum2">x<span class="num">1</span></div>'+
							'</a>'+
							'</div>'+
							'</div>'+
							'<div class="i_bot2">'+
							'<div class="i_bot2_top">'+
							'<div class="i_bot2_bot_left">共<span class="amount"></span>件商品</div>'+
							'<div class="i_bot2_bot_right">'+
							'共计￥<span class="total"></span>(含运费￥<span>0.00</span>)'+
							'</div>'+
							'</div>'+
							'<div class="i_bot2_bot">'+
							'</div>'+
							'</div>'+
							'</div>';
							
							
						
			  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
			  var flow = layui.flow;
			  
//			  init();
			  setTimeout(function(){
					var mySwiper = new Swiper('.swiper-container',{
							autoHeight:true,
						    speed:0,
						    lazyLoading: true,
						   	hashnav:true,
							hashnavWatchState:true,
						    onSlideChangeStart: function(swiper){
						    	$(".navs a").removeClass('active');
						      	$(".navs a").eq(mySwiper.activeIndex).addClass('active');
						      
						      	spage=mySwiper.activeIndex*1+1;
						      	console.log("现在是第"+spage+"页");console.log("spage"+spage);
								myflow(spage);
								console.log("**************"+$(".main").scrollTop());
//						      document.body.scrollTop = document.documentElement.scrollTop = 0;
								$(".main").scrollTop(0);
						     
						     }
						    
						  })
						$(".navs .Btnbutton").on('touchstart mousedown',function(e){
							e.preventDefault();
							$(".navs .Btnbutton").removeClass('active');
							$(this).addClass('active');
							mySwiper.slideTo($(this).index());
							spage=$(this).index()+1;console.log(spage);
							myflow(spage);
							
							 document.body.scrollTop = document.documentElement.scrollTop = 0;
						})   
						
						$(".navs .Btnbutton").click(function(e){
						    e.preventDefault();
						    e.stopPropagation();
						    mySwiper.slideTo($(this).index());
						   spage=$(this).index()+1;console.log(spage);
						   myflow(spage);
						})
						
			},200)
			  
			
			 myflow(spage);
			 init();
			  
			   function myflow(rv){console.log("执行了流加载");
			   console.log(spage);
			   
			  	flow.load({
			    elem: '.slide'+spage //指定列表容器
			    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
			   
			      var lis = [];
			      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
//			      $.get('/api/list?page='+page, function(res){
			        //假设你的列表返回在data集合中
//			        layui.each(res.data, function(index, item){
					if(spage==1){
						
						for(i=0;i<4;i++){
							
							 lis.push(html1);
							 
						}
						
					}else {
						
						for(i=0;i<4;i++){
							 lis.push(html2);
						}
						
					}
						
			         
//			        }); 
			        
			        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
			        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
			        next(lis.join(''), page < 3);    
			        item1_type();item2_type();
//			      });
			    }
			  });
			  
			 }
			   
			 function init(){
				item1_type();
				item2_type();
				djs();
			}
			
		})	
			 
			 
			 
			
		</script>
		<script>
			var a = document.getElementsByTagName('a');
			for(var i = 0; i < a.length; i++)
			{
				a[i].addEventListener('touchstart',function(){},false);
			}
		</script>
	</body>
</html>
